<template>
    <div class="cont">
        <headNav title="充值详情"></headNav>
        <!-- <div>{{charge}}</div> -->
        <!-- <div>{{packages}}</div> -->
        <div class="info-div">
            <div class="tr">
                <div class="td-name">套餐名称：</div>
                <div class="td-val">{{charge.charge.Name}}</div>
            </div>
            <div class="tr">
                <div class="td-name">学生姓名：</div>
                <div class="td-val">{{studentName}}</div>
            </div>
            <div class="tr">
                <div class="td-name">套餐价格：</div>
                <div class="td-val price">
                    <div v-if="charge.charge.OrderType == 1">{{packages.Amount}}元</div> 
                    <div v-else>{{packages.Money}}元</div>
                </div>
            </div>
            <div class="tr">
                <div class="td-name">套餐时长：</div>
                <div class="td-val">
                    <div v-if="charge.charge.OrderType == 1">{{packages.Month}}个月</div> 
                    <div v-else>{{packages.ThePhone}}分钟通话时间</div>
                </div>
            </div>
            <div class="tr">
                <div class="td-name">支付方式：</div>
                <div class="td-val">
                    <img class="wx-img" src="@/assets/img/vip/wx-ico.png" alt="">
                    微信支付
                </div>
            </div>

             <div v-if="!needCard" class="tr">
                <div class="td-name">学生证：</div>
                <div class="td-val">{{device.deviceNo}} </div>
            </div>

            <!-- <div v-if="needCard" class="tr">
              
                <div class="td-val">
                     <img class="chk-img" src="@/assets/img/vip/chk-box.png" alt="">
                    <<img class="chk-img" src="@/assets/img/vip/chk-box-1.png" alt="">
                    <span  class="blue-text">我需要学生证</span>
                   
                </div>
            </div> -->
            <div v-if="needCard">
                <div class="tr">
                    <div class="td-name">收件人：</div>
                    <div class="td-val">
                    {{address.userName}}
                    </div>
                </div>

                <div class="tr">
                    <div class="td-name">联系电话：</div>
                    <div class="td-val">
                    {{address.telNumber}}
                    </div>
                </div>
            
                <div  class="tr"> 
                    <div class="td-name">收货地址:</div>
                    <div @click="openAddress" class="td-val addr">
                        
                        <div v-if="address">
                            {{address.provinceName}}{{address.cityName}}{{address.countryName}}{{address.detailInfo}}
                        </div>
                        <div v-else class="">选择收货地址</div> 
                    </div>
                </div>
            </div>

            <div class="oper-p">
                <div @click="comfirm" class="comfirm-btn">确认支付</div>
                <div @click="cancel" class="cancel-btn">取消支付</div>
            </div>
        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav';
import {getCookie} from '@/util/tool'
export default {
    components: {
      headNav
    },
    computed: {
        studentId () {
            return this.$store.state.user.studentId
        },
        studentName () {
            return this.$store.state.user.studentName
        },
        loginName () {
            return this.$store.state.user.loginName
        },
        realName () {
            return this.$store.state.user.realName
        },
        loginUserId () {
            return this.$store.state.user.loginUserId
        },
        charge () {
            return this.$store.state.vip.charge
        },
        packages () {
            return this.$store.state.vip.packages
        },

        needCard () {
            if (this.packages.IsGiveStudentDevice) {
                if (this.device) {
                    return false
                } else {
                    return true
                }
            } else {
                return false
            }
        }
    },
    data () {
        return {
            address: '',
            device: ''
        }
    },
    methods: {
        openAddress () {
            wx.openAddress({
                success: (res) => {
                    var userName = res.userName; // 收货人姓名
                    var postalCode = res.postalCode; // 邮编
                    var provinceName = res.provinceName; // 国标收货地址第一级地址（省）
                    var cityName = res.cityName; // 国标收货地址第二级地址（市）
                    var countryName = res.countryName; // 国标收货地址第三级地址（国家）
                    var detailInfo = res.detailInfo; // 详细收货地址信息
                    var nationalCode = res.nationalCode; // 收货地址国家码
                    var telNumber = res.telNumber; // 收货人手机号码

                    // alert(JSON.stringify(res))
                    this.address = res
                }
            });
        },
        getStudentDevice () {
            let params = {
                studentId: this.studentId
            }
            this.$store.dispatch('vip/GetStudentDevice', params).then(res => {
                
                this.device = res
            })
        },
        comfirm () {
            let params = {
                type: 1,
                studentId: this.studentId,
                orderType: this.charge.charge.OrderType,
                chargeId: this.charge.charge.Id,
               
                OperatorId: this.loginUserId,
                payType: 2,
                openId: getCookie('OpenId')
            }
            if (this.charge.charge.OrderType == 1) {
                params.PackageId = this.packages.PackageId
            } else {
                params.PackageId = this.packages.PId
            }
            if (this.needCard) {
                if (!this.address) {
                    this.$vux.toast.show({
                        text: '请选择收货地址',
                        type:'cancel',
                        time:2000
                    })
                    return
                }
                params.phone =  this.address.telNumber
                params.address = this.address.provinceName + this.address.cityName + this.address.countryName + this.address.detailInfo
                params.receiver = this.address.userName
            }
            
            // alert(JSON.stringify(params))
            
            this.$store.dispatch('vip/AddOrder', {data: JSON.stringify(params)}).then(res => {
                
                let result = JSON.parse(res)
                if(result.Code==200){
                    var orderId = result.Data.orderId
                    var payUrl = result.Data.payUrl.Data.data
                    var appId = payUrl.jsapi_appid
                    var timeStamp = payUrl.jsapi_timestamp
                    var nonceStr = payUrl.jsapi_noncestr
                    var pack = payUrl.jsapi_package
                    var signType = payUrl.jsapi_signtype
                    var paySign = payUrl.jsapi_paysign

                    WeixinJSBridge.invoke( 'getBrandWCPayRequest', 
                        {
                            "appId":appId,     //公众号名称，由商户传入     
                            "timeStamp":timeStamp,         //时间戳，自1970年以来的秒数     
                            "nonceStr":nonceStr, //随机串     
                            "package":pack,     
                            "signType":signType,         //微信签名方式：     
                            "paySign":paySign //微信签名 
                        },
                        (res) => { 
                            if(res.err_msg == "get_brand_wcpay_request:ok" ){

                            } else {
                                this.$router.go(-1)
                            }
                        }
                    )
                } else {
                    this.$vux.toast.show({
                        text: result.Code,
                        type:'cancel',
                        time:2000
                    })
                }
            })
        },
        cancel () {
            this.$router.go(-1)
        }
    },
    mounted () {
        this.getStudentDevice()
    }
}
</script>
<style scoped>
.cont{
    background: #fff;
}
.info-div{
    padding: 0.46rem;
}
.tr {
    padding: 0.25rem 0;
}
.td-name{
    display: inline-block; vertical-align: middle;
    font-size: 0.3rem; color: #595C61;
        width: 1.5rem;
}
.td-val{
    display: inline-block; vertical-align: middle;
    font-size: 0.3rem; color: #1B1F27;
    width: 4.6rem;
}
.price{
    font-size: 0.38rem !important; color: #FF4400 !important;
}
.wx-img{
    display: inline-block; vertical-align: middle;
    max-width: 0.52rem;
}
.chk-img{
    display: inline-block; vertical-align: middle;
    max-width: 0.44rem;
}
.oper-p{
    padding: 0.3rem 0; text-align: center;
}
.comfirm-btn{
    display: inline-block; vertical-align: middle; background: #128FEF; color: #fff;
    font-size: 0.28rem; font-weight: bold; border: 1px solid #128FEF; border-radius: 0.4rem;
    width: 2.68rem; height: 0.8rem; line-height: 0.8rem; text-align: center;
    margin: 0 0.15rem;
}
.cancel-btn{
    display: inline-block; vertical-align: middle;background: #fff; color:#128FEF;
    font-size: 0.28rem; font-weight: bold; border: 1px solid #128FEF; border-radius: 0.4rem;
    width: 2.68rem; height: 0.8rem; line-height: 0.8rem; text-align: center;
    margin: 0 0.15rem;
}
.addr{
    color:#128FEF;
}
.blue-text{
    color:#FF4400;
}
</style>
